<template>
	<view class="big-box flex-col align-center">
		<top-navigation bgColor='#FFFFFF00' :isBack="true">
			<text slot='center-slot' class="center-slot">邀请好友</text>
			<text slot='right-slot' class="right-slot" @tap="moneyShow=true">我的邀请人</text>
			<!-- <view slot='right-slot' class="center-slot">
				<image @tap="$navto('/pages/mine/setting/setting')" class="center-slot" src="/static/images/my_setting.svg" mode=""></image>
			</view> -->
		</top-navigation>
		<u-toast ref="uToast"></u-toast>
		<view class="menu-box justify-between">
			<view class="justify-start align-center">
				<view class="">
					<view class="long-kuang-num">
						邀请码
					</view>
					<view class="my-long-kuang justify-start" @tap.stop="myCopy(inviteInfo.code)">
						<view class="yaoqing-code">
							{{inviteInfo.code}}
						</view>
						<view class=" justify-start align-center">
							<image class="copy-icon" src="/static/images/mine/copy.svg" mode=""></image>
							<view class="copy">
								复制
							</view>
						</view>


					</view>
				</view>
			</view>
		</view>


		<view class="feature">
			<view class="justify-between" @tap="$navto('/pages/mine/appCenter/inviteList?tab=0')">
				<view class="set-name">
					我邀请的好友
				</view>
				<image class="jiantou" src="/static/images/mine/jiantou.svg" mode=""></image>
			</view>
			<view class="justify-between">
				<view class="feature-box flex-col align-center" @tap="$navto('/pages/mine/appCenter/inviteList?tab=0')">
					<view class="open-map-icon">
						{{inviteInfo.friends_1}}
					</view>
					<view class="title-order">
						直接好友
					</view>
				</view>
				<view class="feature-box flex-col align-center" @tap="$navto('/pages/mine/appCenter/inviteList?tab=1')">
					<view class="open-map-icon">
						{{inviteInfo.friends_2}}
					</view>
					<view class="title-order">
						间接好友
					</view>
				</view>
			</view>

		</view>
		<view class="invite-rules">
			<view class="title">
				邀请奖励规则
			</view>
			<view class="content_1">
				{{inviteInfo.content_1}}
			</view>
			<view class="content_2">
				{{inviteInfo.content_2}}
			</view>
		</view>
		<view class="btn-box">
			<view class="btn" @tap="$navto('/pages/mine/appCenter/share')">
				邀请好友
			</view>
		</view>
		<!-- 联系客服弹出层-->
		<u-popup :show="moneyShow" mode="center" @close="moneyShow=false" round="16rpx" bgColor='transparent'
			overlayOpacity='0.5'>
			<view class="popup-one-box align-center">
				<u-toast ref="upToast"></u-toast>
				<view class="justify-start" v-if="avatar">
					<image class="ava" :src="avatar" mode=""></image>
					<view class="">
						<view class="name">
							{{inviteInfo.parent_user.nickname}}
						</view>
						<view class="real-name">
							{{inviteInfo.parent_user.auth==1?'已':'未'}}实名认证
						</view>
					</view>
				</view>
				<view class="justify-center" v-else>
					<!-- <image class="ava" :src="avatar" mode=""></image> -->
					<view class="">
						<view class="name DINPro-Bold">
							填写邀请人ID
						</view>
						<view class="top-cell justify-between align-center">
							<u-input class="a-input DINPro-Bold" placeholderClass="placeholder-class"
								placeholderStyle='color: rgba(255,255,255,.4);' v-model="invitation_code" color='#FFF'
								border="none" clearable placeholder="请输入对方的ID" maxlength='7'
								@change='onInputId'></u-input>
							<view class="user-info justify-start align-center" v-if="isSearch">
								<image :src="userInfo.avatar" mode=""></image>
								{{userInfo.nickname.length>5?userInfo.nickname.substring(0,5):userInfo.nickname}}
							</view>
						</view>
						<view class="invite-btn-box">
							<view class="btn" @tap="setInvite">
								确定
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				userInfo: {},
				isSearch: false,
				inviteInfo: {
					parent_user: {
						avatar: ''
					}
				},
				avatar: '',
				current: 0,
				moneyShow: false,
				hotList: [{
						url: '/static/images/mine/order-all.svg',
						title: '全部'
					},
					{
						url: '/static/images/mine/order-dai.svg',
						title: '待付款'
					},
					{
						url: '/static/images/mine/order-fa.svg',
						title: '待发货'
					},
					{
						url: '/static/images/mine/order-shou.svg',
						title: '待收货'
					},

				],
				invitation_code: '',
				appList: [{
						url: '/static/images/mine/yaoqing.svg',
						title: '邀请好友'
					},
					{
						url: '/static/images/mine/box-archive.svg',
						title: '我的保管箱'
					},
					{
						url: '/static/images/mine/add-location.svg',
						title: '收货地址'
					},
					{
						url: '/static/images/mine/name.svg',
						title: '实名认证'
					},
					{
						url: '/static/images/mine/bangzhu.svg',
						title: '帮助中心'
					},

				]


			}
		},
		onLoad(option) {
			let that = this
			this.getStatic()


		},
		methods: {
			onInputId(e) {
				console.log(e.length, 'id');
				this.isSearch = false
				if (e.length == 7) {
					this.findProfileByInviteCode(e)
				}
			},
			// 查找用户
			async findProfileByInviteCode(e) {
				let url = '/api/v1/get_user'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url, {
					user_code: e
				})
				if (code == 200 && data) {
					console.log(data, '查找用户');
					this.userInfo = data
					this.isSearch = true
				} else {
					this.$refs.uToast.show({
						message: '未查询到用户'
					})
				}
			},
			async setInvite() {
				let _this = this
				if(this.invitation_code.length==7){
						let {
					code,
					msg,
					data
				} = await this.$getRequest('/api/v1/set_inviter', {
					invitation_code: this.invitation_code
				})
				if (code == 200) {
					console.log(data, '静态资源');
					this.$refs.upToast.show({
						message: msg,
						complete(){
							_this.moneyShow=false
						}
					})
					// this.crystalList = data.list || []
					// this.user = data.user || {}
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
				}
			
			},
			async getStatic() {
				let {
					code,
					msg,
					data
				} = await this.$getRequest('/api/v1/invite')
				if (code == 200) {
					console.log(data, '静态资源');
					this.inviteInfo = data || {}
					this.avatar = data.parent_user.avatar
					// this.crystalList = data.list || []
					// this.user = data.user || {}
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}

			},
			myCopy(value) {
				let _this = this
				//提示模板
				uni.setClipboardData({
					data: value, //要被复制的内容
					showToast: false,
					success: () => { //复制成功的回调函数
						_this.$refs.uToast.show({
							message: '已复制',
							type: 'default',
							duration: '500'

						})
						// uni.showToast({ //提示
						// 	title: wxorqq == 'w' ? "微信号已复制" : 'QQ号已复制'
						// })
					}
				});
			},
			bannerTap() {
				// banner点击
			},
			bannerChange() {
				// banner改变
			},
			featureTap(e) {
				this.moneyShow = true
			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		min-height: 100vh;
		background: linear-gradient(180deg, #152435 0%, #16161E 100%);
		padding: 0 32rpx 60rpx;

		.btn-box {
			position: fixed;
			height: 128rpx;
			width: 100vw;
			bottom: 0;
			padding: 24rpx 48rpx;
			font-weight: 700;
			font-size: 30rpx;
			box-sizing: content-box;
			background-color: rgb(32, 32, 44);
			color: rgba(255, 255, 255, 0.8);

			.btn {
				width: 20.4375rem;
				border-radius: .25rem;
				font-size: .9375rem;
				height: 2.8125rem;
				line-height: 2.8125rem;
				background: #27FF92;
				color: #000;
				text-align: center;
				margin: auto;
			}
		}

		.invite-btn-box {
			bottom: 0;
			font-weight: 700;
			font-size: 30rpx;
			box-sizing: content-box;
			background-color: rgb(32, 32, 44);
			color: rgba(255, 255, 255, 0.8);

			.btn {
				border-radius: .25rem;
				font-size: .9375rem;
				height: 2.8125rem;
				line-height: 2.8125rem;
				background: #27FF92;
				color: #000;
				text-align: center;
				margin: auto;
			}
		}


		.center-slot {
			color: #FFF;
		}

		.right-slot {
			font-size: 26rpx;
			color: #FFF;
		}

		.menu-box {
			margin-top: 46rpx;
			width: calc(100vw - 64rpx);
			position: relative;
			color: #fff;
			border-radius: .5rem;
			z-index: 2;
			color: #fff;





			.long-kuang-num {
				font-size: 24rpx;
				color: #ffffffcc;
			}

			.my-long-kuang {
				margin-top: 25rpx;
				color: rgba(255, 255, 255, .6);
				font-weight: 300;
				font-size: 26rpx;

				.yaoqing-code {
					font-size: 64rpx;
					color: #27ff92;
					font-weight: 700;
				}

				.copy-icon {
					width: 32rpx;
					height: 32rpx;
					margin-left: 20rpx;
				}

				.copy {
					color: #FFF;
					font-size: 20rpx;
				}
			}

		}


	}

	.egg-crystal {
		width: 100%;
		height: 184rpx;
		background-color: #20202c;
		padding: 0 0 0 32rpx;
		background: url('/static/images/mine/my_count-egg.png') no-repeat center center / 100% 100%;
		margin-bottom: 24rpx;

		.egg-crystal-box {
			flex: 1;
		}

		.egg-crystal-box1 {
			flex: 1;
			padding-left: 52rpx;
		}

		.my-long-dan {
			color: #FFFFFF99;
			font-size: 24rpx;
		}

		.dan-num {
			margin-top: 28rpx;
			font-size: 44rpx;
			color: #FFF;
		}

		.unit {
			margin-left: 15rpx;
			font-size: 24rpx;
			color: #FFFFFF99;
		}
	}

	.top-box {
		width: 100%;
		position: relative;
		margin: 76rpx auto 26rpx;
		padding: 26rpx 32rpx;
		background-color: #20202c;
		border-radius: 16rpx;

		.long-baby {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 232rpx;
			height: 232rpx;
		}

		.my-qing-long {
			color: #FFFFFF99;
			font-size: 24rpx;
		}

		.long-num {
			margin-top: 20rpx;
			font-size: 64rpx;
			color: #27ff92;

			.unit {
				margin-left: 15rpx;
				font-size: 24rpx;
				color: #FFFFFF99;
			}
		}
	}

	.invite-rules {
		border-top: .03125rem solid rgba(255, 240, 255, .08);
		padding: 60rpx 16rpx;
		width: 100%;
		color: #FFF;

		.title {
			color: #fff;
			font-size: 1rem;
			line-height: 1.375rem;
			margin-bottom: 32rpx;
			font-weight: 700;
		}

		.content_1 {
			white-space: pre-line;
			line-height: 1.1875rem;
			color: rgba(255, 255, 255, .4);
			font-size: .8125rem;
			margin-bottom: 20rpx;
		}

		.content_2 {
			white-space: pre-line;
			line-height: 1.1875rem;
			color: rgb(224, 62, 45);
			font-size: .8125rem;
		}
	}

	.feature {
		margin: 60rpx 0;
		width: 100%;
		height: 260rpx;
		padding: 46rpx 32rpx 32rpx;
		box-sizing: border-box;
		background-color: #20202c;
		border-radius: 16rpx;

		.set-name {
			font-size: 28rpx;
			color: #FFF;
		}

		.jiantou {
			width: 30rpx;
			height: 30rpx;
		}



		.feature-box {
			flex: 1;
			margin-top: 40rpx;

			.open-map-icon {
				color: #FFF;
				font-size: 40rpx;
				margin-bottom: 32rpx;
			}

			.title-order {
				font-size: 24rpx;
				color: #FFFFFFCC;
			}
		}

	}

	.popup-one-box {
		position: relative;
		z-index: 7;
		width: 468rpx;
		border-radius: 16rpx;
		background: #20202c;
		padding: 36rpx 34rpx;
		color: #FFF;

		.ava {
			width: 117rpx;
			height: 117rpx;
			border-radius: 8rpx;
			margin-right: 24rpx;
		}

		.name {
			margin-top: .4375rem;
			line-height: 1.25rem;
			color: rgba(255, 240, 255, .8);
			font-size: .875rem;
			margin-bottom: .75rem;
			font-weight: 500;
		}

		.top-cell {
			width: 400rpx;
			background: #292838;
			padding: 20rpx;
			min-height: 104rpx;
			color: #FFF;
			margin-bottom: 20rpx;
			border-radius: 8rpx;

			.a-input {
				width: 60rpx;
				background: #292838;
				
				/deep/ .placeholder-class {
					font-size: .875rem;
					color: rgba(255, 255, 255, .4);
				}
			}




			.user-info {
				padding-left: 20rpx;
				color: #FFF;
				font-size: 27rpx;

				image {
					width: 64rpx;
					height: 64rpx;
					margin-right: 18rpx;
					border-radius: 8rpx;
				}
			}

			.name {
				margin-right: 30rpx;
				font-size: 28rpx;
				color: rgba(255, 255, 255, .8);

			}

			.ava {
				width: 96rpx;
				height: 96rpx;
				border-radius: 8rpx;
			}
		}

		.real-name {
			color: rgba(255, 255, 255, .4);
			font-size: .625rem;
			line-height: .875rem;
		}

	}
</style>